<template>
  <div class="leftTree">
    <common-tree
      ref="commonTree"
      :filterNodeMethod="filterNodeMethod"
      :asyncMethod="asyncMethod"
      :title="'组织结构树'"
      :placeholder="'组织名称'"
      :props="props"
      :defaultExpendMethod="defaultExpendMethod"
      :hideHeadMoreBtn="false"
      @nodeClick="handleNodeClick"
    >
      <template v-slot:headMoreBtn="">
        <el-button type="text">{{ "导入" }}</el-button>
        <el-button type="text">{{ "导出" }}</el-button>
      </template>
      <template v-slot:headAddBtn="scope">
        <el-button
          type="text"
          @click="stateChange('addRootNode')"
          :disabled="!!(scope.treeData && scope.treeData.length)"
          size="small"
          icon="el-icon-circle-plus"
        >
          新增根节点
        </el-button>
      </template>
      <template v-slot:customNode="scope">
        <span :title="scope.node.label">{{ scope.node.label }}</span>
      </template>
      <template v-slot:moreBtn="scope">
        <el-button
          type="text"
          @click="stateChange('addChildNode', scope.data)"
          >{{ "新增" }}</el-button
        >
        <el-button
          type="text"
          style="color: #ff2836"
          @click="deleteNode(scope.data)"
          >{{ "删除" }}</el-button
        >
      </template>
    </common-tree>
  </div>
</template>
<script>
import FoldDownIcon from "./svg-font-icon/FoldDown.svg";
import commonTree from "./index.vue";
export default {
  name: "Tree",
  components: { FoldDownIcon, "common-tree": commonTree },
  data() {
    return {
      props: {
        children: "childrenList",
        label: "name",
        isLeaf: "leaf",
      },
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    defaultNode(tree) {
      return tree[0].childrenList[0];
    },
    filterNodeMethod(value, data) {
      return (data.name || "").indexOf(value) > -1;
    },
    asyncMethod(searchKey, node) {
      let data = [
        {
          name: "1一级节点",
          label: "dewdewd",
          id: "1",
          childrenList: [
            {
              name: "1-1节点",
              id: "1-1",
              childrenList: [
                {
                  name: "1-1-1节点",
                  id: "1-1-1",
                },
                {
                  name: "1-1-2节点",
                  id: "1-1-2",
                  childrenList: {
                    name: "1-1-2-1节点",
                    id: "1-1-2-1",
                  },
                },
              ],
            },
            {
              name: "1-2节点",
              id: "1-2",
            },
          ],
        },
        {
          name: "2一级节点",
          id: "2",
          childrenList: [
            {
              name: "2-1节点",
              id: "2-1",
              childrenList: [
                {
                  name: "2-1-1节点",
                  id: "2-1-1",
                },
              ],
            },
            {
              name: "2-2节点",
              id: "2-2",
              childrenList: [
                {
                  name: "2-2-1节点",
                  id: "2-2-1",
                },
              ],
            },
          ],
        },
      ];
      return Promise.resolve(data);
    },
    getTreeData() {
      this.$refs.commonTree && this.$refs.commonTree.refresh();
    },
    // 默认展开的层级
    defaultExpendMethod(treeData) {
      let defaultExpandedKeys = [];
      treeData.forEach((node) => {
        defaultExpandedKeys.push(node.id);
      });
      return defaultExpandedKeys;
    },
    handleNodeClick(nodeData) {
      console.log("nodeClick", nodeData);
      this.$emit("nodeClick", nodeData);
    },
    stateChange(state, data) {
      this.$emit("stateChange", { state, parentData: data });
    },
    deleteNode(data) {
      this.$confirm("确定删除？", "提示", {
        delete: true,
        type: "warning",
      })
        .then(() => {
          this.$message.success("节点删除成功");
          // 处理展开和选中的
          this.$refs.commonTree.refresh(true);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
::v-deep * {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.leftTree {
  height: 100%;
  padding: 16px;
}
</style>
